
var data = JSON.parse(document .getElementById('data').innerHTML);
var len = data[0].startTime.length;
Highcharts.chart('cpu', {
        title: {
                text: 'NAS SMB Server CPU'
        },
        subtitle: {
                text: ''
        },
        exporting:{
            enabled:false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: data[0].startTime
        },
        yAxis: {
                title: {
                        text: '%'
                }
        },
        legend: {
                layout: 'horizontal',
                verticalAlign: 'top'
        },
        plotOptions: {
                series: {
                        label: {
                                connectorAllowed: false
                        }
                }
        },
        series: [{
                name: data[0].host,
                data: data[0].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[1].host,
                data: data[1].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[2].host,
                data: data[2].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[3].host,
                data: data[3].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[4].host,
                data: data[4].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[5].host,
                data: data[5].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[6].host,
                data: data[6].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[7].host,
                data: data[7].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[8].host,
                data: data[8].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[9].host,
                data: data[9].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[10].host,
                data: data[10].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[11].host,
                data: data[11].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[12].host,
                data: data[12].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[13].host,
                data: data[13].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[14].host,
                data: data[14].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[15].host,
                data: data[15].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[16].host,
                data: data[16].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[17].host,
                data: data[17].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[18].host,
                data: data[18].cpu.slice(0,len-3).map(Number)
        }, {
                name: data[19].host,
                data: data[19].cpu.slice(0,len-3).map(Number)
        }],
        responsive: {
                rules: [{
                        condition: {
                                maxWidth: 500
                        },
                        chartOptions: {
                                legend: {
                                        layout: 'horizontal',
                                        align: 'center',
                                        verticalAlign: 'bottom'
                                }
                        }
                }]
        }
});

Highcharts.chart('memory', {
        title: {
                text: 'NAS SMB Server Memory(G)'
        },
        subtitle: {
                text: ''
        },
        exporting:{
            enabled:false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: data[0].startTime
        },
        yAxis: {
                title: {
                        text: 'G'
                }
        },
        legend: {
                layout: 'horizontal',
                verticalAlign: 'top'
        },
        plotOptions: {
                series: {
                        label: {
                                connectorAllowed: false
                        }
                }
        },
        series: [{
                name: data[0].host,
                data: data[0].memory.slice(0,len-3).map(Number)
        }, {
                name: data[1].host,
                data: data[1].memory.slice(0,len-3).map(Number)
        }, {
                name: data[2].host,
                data: data[2].memory.slice(0,len-3).map(Number)
        }, {
                name: data[3].host,
                data: data[3].memory.slice(0,len-3).map(Number)
        }, {
                name: data[4].host,
                data: data[4].memory.slice(0,len-3).map(Number)
        }, {
                name: data[5].host,
                data: data[5].memory.slice(0,len-3).map(Number)
        }, {
                name: data[6].host,
                data: data[6].memory.slice(0,len-3).map(Number)
        }, {
                name: data[7].host,
                data: data[7].memory.slice(0,len-3).map(Number)
        }, {
                name: data[8].host,
                data: data[8].memory.slice(0,len-3).map(Number)
        }, {
                name: data[9].host,
                data: data[9].memory.slice(0,len-3).map(Number)
        }, {
                name: data[10].host,
                data: data[10].memory.slice(0,len-3).map(Number)
        }, {
                name: data[11].host,
                data: data[11].memory.slice(0,len-3).map(Number)
        }, {
                name: data[12].host,
                data: data[12].memory.slice(0,len-3).map(Number)
        }, {
                name: data[13].host,
                data: data[13].memory.slice(0,len-3).map(Number)
        }, {
                name: data[14].host,
                data: data[14].memory.slice(0,len-3).map(Number)
        }, {
                name: data[15].host,
                data: data[15].memory.slice(0,len-3).map(Number)
        }, {
                name: data[16].host,
                data: data[16].memory.slice(0,len-3).map(Number)
        }, {
                name: data[17].host,
                data: data[17].memory.slice(0,len-3).map(Number)
        }, {
                name: data[18].host,
                data: data[18].memory.slice(0,len-3).map(Number)
        }, {
                name: data[19].host,
                data: data[19].memory.slice(0,len-3).map(Number)
        }],
        responsive: {
                rules: [{
                        condition: {
                                maxWidth: 500
                        },
                        chartOptions: {
                                legend: {
                                        layout: 'horizontal',
                                        align: 'center',
                                        verticalAlign: 'bottom'
                                }
                        }
                }]
        }
});
Highcharts.chart('retran', {
        title: {
                text: 'NAS SMB Server Retran'
        },
        subtitle: {
                text: ''
        },
        exporting:{
            enabled:false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: data[0].startTime
        },
        yAxis: {
                title: {
                        text: '%'
                }
        },
        legend: {
                layout: 'horizontal',
                verticalAlign: 'top'
        },
        plotOptions: {
                series: {
                        label: {
                                connectorAllowed: false
                        }
                }
        },
        series: [{
                name: data[0].host,
                data: data[0].retran.slice(0,len-3).map(Number)
        }, {
                name: data[1].host,
                data: data[1].retran.slice(0,len-3).map(Number)
        }, {
                name: data[2].host,
                data: data[2].retran.slice(0,len-3).map(Number)
        }, {
                name: data[3].host,
                data: data[3].retran.slice(0,len-3).map(Number)
        }, {
                name: data[4].host,
                data: data[4].retran.slice(0,len-3).map(Number)
        }, {
                name: data[5].host,
                data: data[5].retran.slice(0,len-3).map(Number)
        }, {
                name: data[6].host,
                data: data[6].retran.slice(0,len-3).map(Number)
        }, {
                name: data[7].host,
                data: data[7].retran.slice(0,len-3).map(Number)
        }, {
                name: data[8].host,
                data: data[8].retran.slice(0,len-3).map(Number)
        }, {
                name: data[9].host,
                data: data[9].retran.slice(0,len-3).map(Number)
        }, {
                name: data[10].host,
                data: data[10].retran.slice(0,len-3).map(Number)
        }, {
                name: data[11].host,
                data: data[11].retran.slice(0,len-3).map(Number)
        }, {
                name: data[12].host,
                data: data[12].retran.slice(0,len-3).map(Number)
        }, {
                name: data[13].host,
                data: data[13].retran.slice(0,len-3).map(Number)
        }, {
                name: data[14].host,
                data: data[14].retran.slice(0,len-3).map(Number)
        }, {
                name: data[15].host,
                data: data[15].retran.slice(0,len-3).map(Number)
        }, {
                name: data[16].host,
                data: data[16].retran.slice(0,len-3).map(Number)
        }, {
                name: data[17].host,
                data: data[17].retran.slice(0,len-3).map(Number)
        }, {
                name: data[18].host,
                data: data[18].retran.slice(0,len-3).map(Number)
        }, {
                name: data[19].host,
                data: data[19].retran.slice(0,len-3).map(Number)
        }],
        responsive: {
                rules: [{
                        condition: {
                                maxWidth: 500
                        },
                        chartOptions: {
                                legend: {
                                        layout: 'horizontal',
                                        align: 'center',
                                        verticalAlign: 'bottom'
                                }
                        }
                }]
        }
});
Highcharts.chart('bytIn', {
        title: {
                text: 'NAS SMB Server Byte In (M)',
        },
        subtitle: {
                text: ''
        },
        exporting:{
            enabled:false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: data[0].startTime
        },
        yAxis: {
                title: {
                        text: 'MB/s'
                }
        },
        legend: {
                layout: 'horizontal',
                verticalAlign: 'top'
        },
        plotOptions: {
                series: {
                        label: {
                                connectorAllowed: false
                        }
                }
        },
        series: [{
                name: data[0].host,
                data: data[0].bytIn.slice(0,len-3)
        }, {
                name: data[1].host,
                data: data[1].bytIn.slice(0,len-3)
        }, {
                name: data[2].host,
                data: data[2].bytIn.slice(0,len-3)
        }, {
                name: data[3].host,
                data: data[3].bytIn.slice(0,len-3)
        }, {
                name: data[4].host,
                data: data[4].bytIn.slice(0,len-3)
        }, {
                name: data[5].host,
                data: data[5].bytIn.slice(0,len-3)
        }, {
                name: data[6].host,
                data: data[6].bytIn.slice(0,len-3)
        }, {
                name: data[7].host,
                data: data[7].bytIn.slice(0,len-3)
        }, {
                name: data[8].host,
                data: data[8].bytIn.slice(0,len-3)
        }, {
                name: data[9].host,
                data: data[9].bytIn.slice(0,len-3)
        }, {
                name: data[10].host,
                data: data[10].bytIn.slice(0,len-3).map(Number)
        }, {
                name: data[11].host,
                data: data[11].bytIn.slice(0,len-3).map(Number)
        }, {
                name: data[12].host,
                data: data[12].bytIn.slice(0,len-3).map(Number)
        }, {
                name: data[13].host,
                data: data[13].bytIn.slice(0,len-3).map(Number)
        }, {
                name: data[14].host,
                data: data[14].bytIn.slice(0,len-3).map(Number)
        }, {
                name: data[15].host,
                data: data[15].bytIn.slice(0,len-3).map(Number)
        }, {
                name: data[16].host,
                data: data[16].bytIn.slice(0,len-3).map(Number)
        }, {
                name: data[17].host,
                data: data[17].bytIn.slice(0,len-3).map(Number)
        }, {
                name: data[18].host,
                data: data[18].bytIn.slice(0,len-3).map(Number)
        }, {
                name: data[19].host,
                data: data[19].bytIn.slice(0,len-3).map(Number)
        }],
        responsive: {
                rules: [{
                        condition: {
                                maxWidth: 500
                        },
                        chartOptions: {
                                legend: {
                                        layout: 'horizontal',
                                        align: 'center',
                                        verticalAlign: 'bottom'
                                }
                        }
                }]
        }
});

var chart = Highcharts.chart('bytOut', {
        title: {
                text: 'NAS SMB Server Byte Out (M)',
        },
        subtitle: {
                text: ''
        },
        exporting:{
            enabled:false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: data[0].startTime
        },
        yAxis: {
                title: {
                        text: 'MB/s'
                }
        },
        legend: {
                layout: 'horizontal',
                verticalAlign: 'top'
        },
        plotOptions: {
                series: {
                        label: {
                                connectorAllowed: false
                        }
                }
        },
        series: [{
                name: data[0].host,
                data: data[0].bytOut.slice(0,len-3)
        }, {
                name: data[1].host,
                data: data[1].bytOut.slice(0,len-3)
        }, {
                name: data[2].host,
                data: data[2].bytOut.slice(0,len-3)
        }, {
                name: data[3].host,
                data: data[3].bytOut.slice(0,len-3)
        }, {
                name: data[4].host,
                data: data[4].bytOut.slice(0,len-3)
        }, {
                name: data[5].host,
                data: data[5].bytOut.slice(0,len-3)
        }, {
                name: data[6].host,
                data: data[6].bytOut.slice(0,len-3)
        }, {
                name: data[7].host,
                data: data[7].bytOut.slice(0,len-3)
        }, {
                name: data[8].host,
                data: data[8].bytOut.slice(0,len-3)
        }, {
                name: data[9].host,
                data: data[9].bytOut.slice(0,len-3)
        }, {
                name: data[10].host,
                data: data[10].bytOut.slice(0,len-3).map(Number)
        }, {
                name: data[11].host,
                data: data[11].bytOut.slice(0,len-3).map(Number)
        }, {
                name: data[12].host,
                data: data[12].bytOut.slice(0,len-3).map(Number)
        }, {
                name: data[13].host,
                data: data[13].bytOut.slice(0,len-3).map(Number)
        }, {
                name: data[14].host,
                data: data[14].bytOut.slice(0,len-3).map(Number)
        }, {
                name: data[15].host,
                data: data[15].bytOut.slice(0,len-3).map(Number)
        }, {
                name: data[16].host,
                data: data[16].bytOut.slice(0,len-3).map(Number)
        }, {
                name: data[17].host,
                data: data[17].bytOut.slice(0,len-3).map(Number)
        }, {
                name: data[18].host,
                data: data[18].bytOut.slice(0,len-3).map(Number)
        }, {
                name: data[19].host,
                data: data[19].bytOut.slice(0,len-3).map(Number)
        }],
        responsive: {
                rules: [{
                        condition: {
                                maxWidth: 500
                        },
                        chartOptions: {
                                legend: {
                                        layout: 'horizontal',
                                        align: 'center',
                                        verticalAlign: 'bottom'
                                }
                        }
                }]
        }
});

Highcharts.chart('load', {
        title: {
                text: 'NAS SMB Server Load',
        },
        subtitle: {
                text: ''
        },
        exporting:{
            enabled:false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: data[0].startTime
        },
        yAxis: {
                title: {
                        text: 'normal=1 '
                }
        },
        legend: {
                layout: 'horizontal',
                verticalAlign: 'top'
        },
        plotOptions: {
                series: {
                        label: {
                                connectorAllowed: false
                        }
                }
        },
        series: [{
                name: data[0].host,
                data: data[0].load.slice(0,len-3).map(Number)
        }, {
                name: data[1].host,
                data: data[1].load.slice(0,len-3).map(Number)
        }, {
                name: data[2].host,
                data: data[2].load.slice(0,len-3).map(Number)
        }, {
                name: data[3].host,
                data: data[3].load.slice(0,len-3).map(Number)
        }, {
                name: data[4].host,
                data: data[4].load.slice(0,len-3).map(Number)
        }, {
                name: data[5].host,
                data: data[5].load.slice(0,len-3).map(Number)
        }, {
                name: data[6].host,
                data: data[6].load.slice(0,len-3).map(Number)
        }, {
                name: data[7].host,
                data: data[7].load.slice(0,len-3).map(Number)
        }, {
                name: data[8].host,
                data: data[8].load.slice(0,len-3).map(Number)
        }, {
                name: data[9].host,
                data: data[9].load.slice(0,len-3).map(Number)
        }, {
                name: data[10].host,
                data: data[10].load.slice(0,len-3).map(Number)
        }, {
                name: data[11].host,
                data: data[11].load.slice(0,len-3).map(Number)
        }, {
                name: data[12].host,
                data: data[12].load.slice(0,len-3).map(Number)
        }, {
                name: data[13].host,
                data: data[13].load.slice(0,len-3).map(Number)
        }, {
                name: data[14].host,
                data: data[14].load.slice(0,len-3).map(Number)
        }, {
                name: data[15].host,
                data: data[15].load.slice(0,len-3).map(Number)
        }, {
                name: data[16].host,
                data: data[16].load.slice(0,len-3).map(Number)
        }, {
                name: data[17].host,
                data: data[17].load.slice(0,len-3).map(Number)
        }, {
                name: data[18].host,
                data: data[18].load.slice(0,len-3).map(Number)
        }, {
                name: data[19].host,
                data: data[19].load.slice(0,len-3).map(Number)
        }],
        responsive: {
                rules: [{
                        condition: {
                                maxWidth: 500
                        },
                        chartOptions: {
                                legend: {
                                        layout: 'horizontal',
                                        align: 'center',
                                        verticalAlign: 'bottom'
                                }
                        }
                }]
        }
});
/*
ctx = document.getElementById('performance').getContext('2d');
var perf = JSON.parse(document .getElementById('perf').innerHTML);
color = Chart.helpers.color;
chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'pie',
    data: {
        datasets: [{
            data : [perf[1], perf[0], perf[2]],
            backgroundColor: [window.chartColors.blue,window.chartColors.red],
        }],
        labels: ["空闲:" + perf[1] + " GB", "数据量:" + perf[0] + " GB", "元数据:" + perf[2] + " GB"],
    },
    options: {
        responsive: true,
        position: 'left'
    }
});

ctx = document.getElementById('standard').getContext('2d');
var standard = JSON.parse(document .getElementById('stand').innerHTML);
color = Chart.helpers.color;
chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'pie',
    data: {
        datasets: [{
            data : [standard[1], standard[0], standard[2]],
            backgroundColor: [window.chartColors.blue,window.chartColors.red],
        }],
        labels: ["空闲:" + standard[1] + " GB", "数据量:" + standard[0] + " GB", "元数据:" + standard[2] + " GB"],
    },
    options: {
        responsive: true,
        position: 'right'
    }
});**/
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
    return {
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
});

var perf = JSON.parse(document .getElementById('perf').innerHTML);
Highcharts.chart('performance', {
        chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
        },
        exporting:{
            enabled:false
        },
        credits: {
            enabled: false
        },
        title: {
                text: ''
        },
        tooltip: {
                pointFormat: '<b>{point.name}</b>:{point.y} GB'
        },
        plotOptions: {
                pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        size: 240,
                        dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b><br>{point.y} GB<br> {point.percentage:.3f}%', 
                                style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                        }
                }
        },
        series: [{
                name: '比例',
                colorByPoint: true,
                data: [{
                        name: '数据量',
                        y: parseInt(perf[0])
                }, {
                        name: '元数据',
                        y: parseInt(perf[2])
                }, {
                        name: '可用空间',
                        y: parseInt(perf[1])
                }]
        }]
});

var standard = JSON.parse(document .getElementById('stand').innerHTML);
Highcharts.chart('standard', {
        chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                credits: { enabled: false},
                type: 'pie'
        },
        exporting:{
            enabled:false
        },
        credits: {
            enabled: false
        },
        title: {
                text: ''
        },
        tooltip: {
                pointFormat: '<b>{point.name}</b>:{point.y} GB'
        },
        plotOptions: {
                pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        size: 240,
                        dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b><br>{point.y} GB<br> {point.percentage:.3f}%', 
                                style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                        }
                }
        },
        series: [{
                name: '比例',
                colorByPoint: true,
                data: [{
                        name: '数据量',
                        y: parseInt(standard[0])
                }, {
                        name: '元数据',
                        y: parseInt(standard[2])
                }, {
                        name: '可用空间',
                        y: parseInt(standard[1])
                }]
        }]
});
